<template>
  <div class="edit-box">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="number">
        <el-input type="text" v-model="ruleForm.number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input type="text" v-model="ruleForm.sex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input type="text" v-model="ruleForm.role" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input type="text" v-model="ruleForm.department" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input type="text" v-model="ruleForm.email" autocomplete="off"></el-input>
      </el-form-item>
     <el-form-item label="电话" prop="tel">
        <el-input type="text" v-model="ruleForm.tel" autocomplete="off"></el-input>
      </el-form-item>
     <el-form-item label="创建日期" prop="date">
        <el-input type="text" v-model="ruleForm.date" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="isLoading">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="cancel">关闭窗口</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script type="text/ecmascript-6">
import { updateMember, addMember } from "@/api/users.js";
export default {
  name: "",
  props: {
    type: String,
    ruleForm: {
      type: Object,
      default() {
        return {
         number: "",
          name:'',
          sex: "",
          role:'',
          department:'',
          email:'',
          tel: "",
          date:''
        };
      }
    }
  },
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入姓名"));
      } else if (!/^.{2,4}$/.test(value)) {
        callback(new Error("姓名长度不对!"));
      } else {
        callback();
      }
    };
    var validateTel = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入电话号码"));
      } else if (!/^\d{11}$/.test(value)) {
        callback(new Error("电话号码无效"));
      } else {
        callback();
      }
    };

    var validateNumber = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };

  var validateDepartment = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入部门"));
      }  else {
        callback();
      }
    };

    return {
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        tel: [{ validator: validateTel, trigger: "blur" }],
        number: [{ validator: validateNumber, trigger: "blur" }],
        department:[{ validator: validateDepartment, trigger: "blur" }],
      },
      //   加载中状态
      isLoading: false
    };
  },
  components: {},
  methods: {
   resetForm(formName) {
        this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.isLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.type === "edit") {
            this.updateMember()
          } else {
            this.addMember()
          }
        } else {
          this.$message.error("提交失败");
          this.isLoading = false;
          return false;
        }
      });
    },
    updateMember(){
       //发起请求，更新数据
          updateMember(this.ruleForm)
            .then(res => {
              this.isLoading = false;
              console.log(res);
              if (res.data.code === 3000) {
                this.$message("成功修改");
                this.$emit("cancel");
              }
            })
            .catch(err => {
              console.log("err", err);
            });
    },
    addMember(){
      //发起请求，验证身份
        addMember(this.ruleForm)
          .then(res => {
            this.isLoading = false;
              if (res.data.code === 3000) {
                this.$message("成功添加");
                this.$emit("cancel");
              }
          })
          .catch(err => {
            console.log("err", err);
          });
    },
    // 取消编辑
    cancel() {
      this.$emit("cancel");
    },
  }
};
</script>

<style lang="stylus" scoped>
.edit-box {
  position: fixed;
  width: 1400px;
  height: 600px;
  left: 50%;
  top: 50%;
  margin-left: -500px;
  margin-top: -300px;
  background-color: #fff;
}
</style>
